
$(function() {
	//当点击查询按钮时，根据仪表编号 起始时间和结束时间 显示该仪表的曲线。
	$("#chartTimeBtn").one('click',function(){
		$("#chartInfo").hide();
        var startTime = (new Date($("#start-time").val())).getTime();//获取开始时间 并转化为毫秒数
        var endTime = (new Date($("#end-time").val())).getTime(); //获取结束时间  并转化为毫秒数
        // console.log(startTime,endTime);
        
		var dataurl = "assets/data/chart1.json?deviceId="+deviceId+"&startTime="+startTime+"&endTime="+endTime; //数据接口0000100001
		//ajax 方式获取数据
		$.ajax({
			url: dataurl,
			type: "GET",
			dataType: "json",   
	        error: erryFunction,  //错误执行方法
			success: succFunction //成功执行方法 
		});  
	    function erryFunction() {  
	        alert("error");  
	    }
		function succFunction(json) {  
			var datasets = json;               

			var i = 0;
			$.each(datasets, function(key, val) {
				val.color = i;
				++i;
			});
			// 添加checkbox 
			var choiceContainer = $(".chart-option");
			$.each(datasets, function(key, val) {
				choiceContainer.append(
					`<li>
		                <label>
		                    <input type="checkbox" name="`+key+`" checked="checked" id="id`+key+`">
		                    <img alt="" src="assets/js/tree/images/file.gif">
		                    <span for="id`+key+`">`+val.label+`</span>
		                </label>
		            </li>`
		        );
			});

			choiceContainer.find("input").click(plotAccordingToChoices);

			function plotAccordingToChoices() {

				var data = [];

				choiceContainer.find("input:checked").each(function () {
					var key = $(this).attr("name");
					if (key && datasets[key]) {
						data.push(datasets[key]);
					}
				});
				if (data.length > 0) {
					var plot = $.plot("#deviceChart", data, {
						series: {
						    lines: { show: true,
									 lineWidth: 2,
								},
						    points: { show: true },
						    shadowSize: 2
					    },
					    grid: { hoverable: true, 
							   clickable: true, 
							   tickColor: "#dddddd",
							   borderWidth: 2 
						},
						yaxis: {
						 	// position:"left" //y轴默认在左边
						 	tickDecimals: 2 //y轴小数点位数
						},
						xaxis: {
							mode: "time", //x轴显示时间数据格式
	                        tickSize:[1, "day"], //刻度标签会以每1天的间隔显示
	                        timeformat: "%Y/%m/%d", //刻度标签要输出的格式
	                        rotateTicks: 45, //jquery.flot.tickrotor 控制x轴过长时的倾斜
			                labelWidth: 150,
			                labelHeight: 150,
			                reserveSpace: true,
							tickDecimals: 0 //x轴小数点位数
						},
						legend: {
					        noColumns: 0,
						        labelFormatter: function (label, series) {
						            return "<font size=\"2\" color=\"white\">" + label + "</font>";
						    },            
						    backgroundColor: "#000",
						    backgroundOpacity: 0.9,
						    labelBoxBorderColor: "#000000",
						    position: "nw"
						}
					});

					function showTooltip(x, y, contents) {
						$('<div id="tooltip">' + contents + '</div>').css( {
							position: 'absolute',
							display: 'none',
							top: y + 5,
							left: x + 5,
							border: '1px solid #fdd',
							padding: '2px',
							'background-color': '#dfeffc',
							opacity: 1,
							'z-index': 1000
						}).appendTo("body").fadeIn(200);
					}

					var previousPoint = null;
					$("#deviceChart").bind("plothover", function (event, pos, item) {
						$("#x").text(pos.x);
						$("#y").text(pos.y.toFixed(2));

							if (item) {
								if (previousPoint != item.dataIndex) {
									previousPoint = item.dataIndex;

									$("#tooltip").remove();
									var x = new Date(item.datapoint[0]).toLocaleString(),//时间戳毫秒数转换成日期时间
										y = item.datapoint[1].toFixed(2);

									showTooltip(item.pageX, item.pageY,
												item.series.label + " 在 " + x + " 的值是 " + y);
								}
							}
							else {
								$("#tooltip").remove();
									previousPoint = null;
							}
						});	
					}
				}

			plotAccordingToChoices();
		}
	})
});

	

